<template>
    <div class="banner-list">
        <el-row>
            <span>轮播列表</span>
        </el-row>
        <el-row>
            <el-table :data="list" height="500" border style="text-align: center;">
                <el-table-column prop="bannerid" label="编号" width="200"></el-table-column>
                <el-table-column prop="img" label="图片" >
                    <template v-slot="{row}">
                        <el-image style="width:80px;" :src="row.img"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="alt" label="提示信息" ></el-table-column>
                <el-table-column prop="link" label="链接地址" ></el-table-column>
                <!-- v-if="isAdmin"  如果是管理员才会渲染 -->
                <el-table-column label="是否展示"  v-if="isAdmin">
                    <template v-slot="{row}">
                        <!-- :disabled="!isAdmin"  如果不是管理员就禁用 -->
                        <el-switch 
                            :disabled="!isAdmin"
                            v-model="row.flag" 
                            @change="($event)=>{changeHandler($event,row.bannerid)}"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" >
                    <template v-slot="{row}">
                       <el-button v-authority:disabled="['superAdmin','admin']" @click="delHandler(row.bannerid)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
    
    </div>
</template>

<script>
import { getBannerListAPI,updateBannerFlagAPI,delBannerListAPI } from '@/api/banner';
import authority from '@/mixins/authority';

export default {
    name: "BannerListView",
    mixins:[authority],
    data() {
        return {
            list: [],
        }
    },
    methods: {
        async getBannerList() {
            try {
                var res = await getBannerListAPI();
                console.log("获取banner列表", res);
                this.list = res.data;
            } catch (err) {
                this.$message.error(err.message)
            }
        },
        async changeHandler(flag,bannerid){
            console.log(flag,bannerid);  // updateBannerFlagAPI
            try {
                var res = await updateBannerFlagAPI({flag,bannerid});
                console.log("更新成功", res);
                this.$message.success("状态更新成功")
            } catch (err) {
                this.$message.error(err.message)
            }
        },
        async delHandler(bannerid){
            console.log(bannerid);
            try {
                var res = await delBannerListAPI({bannerid});
                console.log("删除成功", res);
                var index = this.list.findIndex(v=>v.bannerid == bannerid);
                this.list.splice(index,1);
                this.$message.success("删除成功")
            } catch (err) {
                this.$message.error(err.message)
            }
        }
    },
    mounted(){
        this.getBannerList();
    }
}
</script>

<style lang="scss" scoped></style>